////
/// @group navigation
////

@use "sass:list";
@use "sass:map";
@use "../utils";
@use "../border-radius";
@use "../spacing";
@use "../tree/tree";
@use "../interaction/interaction";

/// Set to `true` to disable all the styles.
/// @type Boolean
$disable-everything: false !default;

/// The default border-radius.
/// @type Number
$border-radius: calc(border-radius.get-var(lg) * 3) !default;

/// The default horizontal padding.
/// @type Number
$horizontal-padding: spacing.get-var(xs) !default;

/// This is used to continually add more padding to the start of the
/// `NavigationItem` the deeper within the nested lists it appears.
///
/// @see $increasing-padding
/// @type Number
$padding-incrementor: calc(spacing.get-var(sm) * 1.5) !default;

/// The available configurable css variables and mostly used internally for the
/// `get-var`, `set-var`, and `use-var` utils.
/// @type List
$variables: (border-radius, horizontal-padding, padding-incrementor);

/// @param {String} name - The supported variable name
/// @param {any} fallback [null] - An optional fallback value
/// @returns {String} a `var()` statement
@function get-var($name, $fallback: null) {
  $var: utils.get-var-name($variables, $name, "navigation");
  @if $fallback {
    @return var(#{$var}, #{$fallback});
  }

  @return var(#{$var});
}

/// @param {String} name - The supported variable name
/// @param {any} value - The value to set the variable to. Supports `null` which
/// will just be a no-op.
@mixin set-var($name, $value) {
  @if $value {
    #{utils.get-var-name($variables, $name, "navigation")}: #{$value};
  }
}

/// @param {String} property - The css property to apply the variable to
/// @param {String} name [$property] - The supported variable name
/// @param {any} fallback [null] - An optional fallback value if the variable
/// has not been set
@mixin use-var($property, $name: $property, $fallback: null) {
  #{$property}: get-var($name, $fallback);
}

/// Conditionally applies the css variables based on feature flags
@mixin variables {
  @if not $disable-everything {
    @include set-var(border-radius, $border-radius);
    @include set-var(horizontal-padding, $horizontal-padding);
    @include set-var(padding-incrementor, $padding-incrementor);
  }
}

/// This is the `calc` string for adding more padding the deeper within the
/// `Navigation` tree a link appears.
///
/// @ignore NOTE: This has to be defined here since it relies on the `get-var` function.
///
/// @type String
$increasing-padding: calc(
  tree.get-var(depth) * get-var(padding-incrementor) +
    get-var(horizontal-padding)
);

/// Generates all the styles based on feature flags.
///
/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
/// layer behavior
@mixin styles($disable-layer: false) {
  @if not $disable-everything {
    @include utils.optional-layer(navigation, $disable-layer) {
      .rmd-nav-group {
        min-width: 0;

        &--np {
          padding: 0;
        }
      }

      .rmd-nav-item {
        @include use-var(padding-right, horizontal-padding);

        padding-left: $increasing-padding;
        padding-right: $horizontal-padding;

        // this is applied to both the `NavItemButton` and `NavItemLink`
        &__content {
          @include use-var(border-radius);

          font-size: inherit;
          justify-content: space-between;
          letter-spacing: inherit;
          line-height: initial;
          width: 100%;
        }

        &__link {
          justify-content: flex-start;

          &::after {
            @include utils.pseudo-element;
            @include interaction.use-var(
              background-color,
              selected-background-color
            );

            opacity: 0;
          }

          &--active::after {
            opacity: 1;
          }
        }

        @include utils.rtl {
          @include use-var(padding-left, horizontal-padding);

          padding-right: $increasing-padding;
        }
      }
    }
  }
}
